<template>
  <div class="trisolaris-login">
    <!-- 三体宇宙背景 -->
    <div class="cosmic-background">
      <div class="stars-layer"></div>
      <div class="nebula-layer"></div>
      <div class="particle-field">
        <div class="cosmic-particle" v-for="i in particleCount" :key="i" :style="particleStyle(i)"></div>
      </div>

      <!-- 三体星系 -->
      <div class="trisolaris-system">
        <div class="chaotic-sun"></div>
        <div class="planet-trajectory traj-1">
          <div class="flying-planet p1"></div>
        </div>
        <div class="planet-trajectory traj-2">
          <div class="flying-planet p2"></div>
        </div>
        <div class="planet-trajectory traj-3">
          <div class="flying-planet p3"></div>
        </div>
      </div>

      <!-- 智子监控网格 -->
      <div class="proton-grid"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-terminal">
      <div class="terminal-header">
        <div class="header-glitch">
          <h1 class="terminal-title">ETO 安全访问终端</h1>
          <div class="glitch-effect" data-text="ETO 安全访问终端">ETO 安全访问终端</div>
        </div>
        <div class="terminal-status">
          <span class="status-indicator"></span>
          <span class="status-text">维度连接: 稳定</span>
        </div>
      </div>

      <div class="terminal-body">
        <div class="login-prompt">
          <div class="prompt-line">
            <span class="prompt-sign">[三体文明]></span>
            <span class="prompt-text">欢迎降临主，请输入访问凭证</span>
          </div>
          <div class="prompt-line">
            <span class="prompt-sign">[智子监控]></span>
            <span class="prompt-text blink">文明等级检测: 通过</span>
          </div>
        </div>

        <el-form class="access-form" :model="loginModel" ref="loginForm" :rules="rules" size="large">
          <el-form-item prop="username">
            <div class="input-field">
              <label class="field-label">用户标识符</label>
              <el-input
                  v-model="loginModel.username"
                  placeholder="输入降临派识别码"
                  class="cyber-input"
              >
                <template #prefix>
                  <el-icon class="cyber-icon"><User /></el-icon>
                </template>
              </el-input>
              <div class="input-underline"></div>
            </div>
          </el-form-item>

          <el-form-item prop="password">
            <div class="input-field">
              <label class="field-label">量子密钥</label>
              <el-input
                  v-model="loginModel.password"
                  type="password"
                  placeholder="输入维度通行码"
                  show-password
                  class="cyber-input"
              >
                <template #prefix>
                  <el-icon class="cyber-icon"><Lock /></el-icon>
                </template>
              </el-input>
              <div class="input-underline"></div>
            </div>
          </el-form-item>

          <el-form-item prop="code">
            <div class="input-field">
              <label class="field-label">智子验证</label>
              <div class="verification-container">
                <el-input
                    v-model="loginModel.code"
                    placeholder="输入质子展开码"
                    class="cyber-input verification-input"
                >
                  <template #prefix>
                    <el-icon class="cyber-icon"><Key /></el-icon>
                  </template>
                </el-input>
                <div class="proton-verification" @click="getImage">
                  <div class="proton-sphere">
                    <div class="proton-core"></div>
                    <div class="proton-orbit"></div>
                  </div>
                  <img :src="imgSrc" alt="智子验证" class="verification-image" />
                  <div class="refresh-overlay">
                    <el-icon class="refresh-icon"><Refresh /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="access-actions">
              <el-button
                  class="dimension-reset"
                  @click="resetBtn"
                  :icon="RefreshLeft"
              >
                <span class="btn-glow"></span>
                维度重置
              </el-button>
              <el-button
                  class="quantum-login"
                  type="primary"
                  @click="commit"
                  :icon="Check"
                  :loading="loading"
              >
                <span class="btn-glow"></span>
                量子登录
                <div class="login-pulse"></div>
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div class="terminal-footer">
        <div class="security-monitor">
          <div class="monitor-line">
            <span class="monitor-tag">[质子锁]</span>
            <span class="monitor-value">状态: 激活</span>
          </div>
          <div class="monitor-line">
            <span class="monitor-tag">[维度桥]</span>
            <span class="monitor-value">连接: 地球-三体</span>
          </div>
          <div class="monitor-line">
            <span class="monitor-tag">[警告]</span>
            <span class="monitor-value blink">不要回答！不要回答！不要回答！</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 浮动警告文本 -->
    <div class="floating-warnings">
      <div class="warning-text" v-for="(text, index) in warnings" :key="index" :style="warningStyle(index)">
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { getImageApi, loginApi } from "@/api/user";
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user'
import { useRouter } from "vue-router";
import {
  User,
  Lock,
  Key,
  Refresh,
  RefreshLeft,
  Check
} from "@element-plus/icons-vue";

const loginForm = ref<FormInstance>()
const loading = ref(false)
const loginModel = reactive({
  username: 'admin',
  password: '123',
  code: '1'
})
const imgSrc = ref('')
const particleCount = 80

const warnings = [
  '警告: 智子监控中',
  '文明坐标: 地球',
  '维度: 3',
  '不要回答！',
  'ETO 降临派',
  '主，我需要你的指引'
]

const getImage = async () => {
  let res = await getImageApi()
  if (res && res.code == 200) {
    imgSrc.value = res.data
  }
}

onMounted(() => {
  getImage()
})

const resetBtn = () => {
  loginModel.username = ''
  loginModel.password = ''
  loginModel.code = ''
}

const rules = reactive({
  username: [{
    required: true,
    message: '必须输入降临派识别码',
    trigger: ['blur', 'change']
  }],
  password: [{
    required: true,
    message: '必须输入维度通行码',
    trigger: ['blur', 'change']
  }],
  code: [{
    required: true,
    message: '必须输入质子展开码',
    trigger: ['blur', 'change']
  }]
})

const userStore = useUserStore()
const router = useRouter()
const commit = () => {
  loginForm.value?.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        let res = await loginApi(loginModel)
        if (res && res.code == 200) {
          userStore.setUserId(res.data.userId)
          userStore.setNickName(res.data.nickName)
          userStore.setToken(res.data.token)
          ElMessage.success('维度连接成功！欢迎降临主')
          await router.push({ path: '/dashboard' })
        }
      } finally {
        loading.value = false
      }
    }
  })
}

// 粒子样式
const particleStyle = (index: number) => {
  const size = Math.random() * 3 + 1
  const duration = Math.random() * 15 + 10
  const delay = Math.random() * 10
  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${Math.random() * 100}%`,
    animationDuration: `${duration}s`,
    animationDelay: `${delay}s`,
    background: `rgba(${Math.random() * 100 + 155}, ${Math.random() * 100 + 155}, 255, ${Math.random() * 0.5 + 0.2})`
  }
}

// 警告文本样式
const warningStyle = (index: number) => {
  const duration = Math.random() * 20 + 20
  const delay = Math.random() * 10
  return {
    animationDuration: `${duration}s`,
    animationDelay: `${delay}s`,
    left: `${Math.random() * 80 + 10}%`
  }
}
</script>

<style scoped>
.trisolaris-login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #0a0e29 0%, #000000 100%);
  font-family: 'Segoe UI', 'Microsoft YaHei', monospace;
}

/* 宇宙背景 */
.cosmic-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.stars-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background:
      radial-gradient(2px 2px at 20px 30px, #eee, transparent),
      radial-gradient(2px 2px at 40px 70px, #fff, transparent),
      radial-gradient(1px 1px at 90px 40px, #ddd, transparent),
      radial-gradient(1px 1px at 130px 80px, #fff, transparent);
  background-size: 200px 200px;
  animation: starsTwinkle 8s ease-in-out infinite;
}

.nebula-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background:
      radial-gradient(circle at 20% 30%, rgba(102, 0, 255, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(0, 200, 255, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 80%, rgba(255, 0, 128, 0.1) 0%, transparent 50%);
  animation: nebulaFloat 30s ease-in-out infinite;
}

.particle-field {
  position: absolute;
  width: 100%;
  height: 100%;
}

.cosmic-particle {
  position: absolute;
  border-radius: 50%;
  animation: cosmicFloat 15s infinite linear;
}

@keyframes starsTwinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes nebulaFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10px, -10px) scale(1.1); }
  66% { transform: translate(-5px, 5px) scale(0.9); }
}

@keyframes cosmicFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

/* 三体星系 */
.trisolaris-system {
  position: absolute;
  top: 50%;
  right: 10%;
  width: 300px;
  height: 300px;
  transform: translateY(-50%);
}

.chaotic-sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #ff3b1d 0%, #c41c00 50%, #8b0000 100%);
  border-radius: 50%;
  box-shadow:
      0 0 40px #ff6b35,
      0 0 80px #ff3b1d,
      0 0 120px #c41c00;
  animation: sunChaos 4s ease-in-out infinite;
}

@keyframes sunChaos {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    box-shadow:
        0 0 40px #ff6b35,
        0 0 80px #ff3b1d,
        0 0 120px #c41c00;
  }
  33% {
    transform: translate(-50%, -50%) scale(1.2) rotate(120deg);
    box-shadow:
        0 0 60px #ff6b35,
        0 0 100px #ff3b1d,
        0 0 140px #c41c00;
  }
  66% {
    transform: translate(-50%, -50%) scale(0.9) rotate(240deg);
    box-shadow:
        0 0 30px #ff6b35,
        0 0 70px #ff3b1d,
        0 0 100px #c41c00;
  }
}

.planet-trajectory {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.traj-1 { width: 120px; height: 120px; animation: chaoticOrbit 25s linear infinite; }
.traj-2 { width: 180px; height: 180px; animation: chaoticOrbit 20s linear infinite reverse; }
.traj-3 { width: 240px; height: 240px; animation: chaoticOrbit 30s linear infinite; }

.flying-planet {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.p1 { width: 16px; height: 16px; background: #4fc3f7; box-shadow: 0 0 15px #4fc3f7; }
.p2 { width: 20px; height: 20px; background: #81c784; box-shadow: 0 0 18px #81c784; }
.p3 { width: 14px; height: 14px; background: #ba68c8; box-shadow: 0 0 12px #ba68c8; }

@keyframes chaoticOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  25% { transform: translate(-50%, -50%) rotate(90deg) scale(1.1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(0.9); }
  75% { transform: translate(-50%, -50%) rotate(270deg) scale(1.05); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* 智子网格 */
.proton-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
      linear-gradient(90deg, transparent 99%, rgba(0, 255, 255, 0.1) 100%),
      linear-gradient(0deg, transparent 99%, rgba(0, 255, 255, 0.1) 100%);
  background-size: 50px 50px;
  animation: gridScan 10s linear infinite;
}

@keyframes gridScan {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

/* 登录终端 */
.login-terminal {
  width: 440px;
  background: rgba(10, 14, 41, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow:
      0 0 40px rgba(0, 255, 255, 0.2),
      inset 0 0 40px rgba(0, 255, 255, 0.1);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.terminal-header {
  padding: 24px 30px 20px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.1), transparent);
}

.header-glitch {
  position: relative;
  margin-bottom: 12px;
}

.terminal-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.glitch-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: glitch 3s infinite;
}

@keyframes glitch {
  0%, 100% { opacity: 0; transform: translate(0); }
  5% { opacity: 0.2; transform: translate(-2px, 2px); }
  10% { opacity: 0; }
  45% { opacity: 0; }
  50% { opacity: 0.3; transform: translate(2px, -2px); }
  55% { opacity: 0; }
}

.terminal-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff00;
  animation: statusPulse 2s ease-in-out infinite;
}

.status-text {
  font-size: 12px;
  color: #00ffff;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.terminal-body {
  padding: 30px;
}

.login-prompt {
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  font-family: 'Courier New', monospace;
}

.prompt-line {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.prompt-line:last-child {
  margin-bottom: 0;
}

.prompt-sign {
  color: #00ffff;
  font-weight: bold;
}

.prompt-text {
  color: #e0e0ff;
}

.blink {
  animation: blink 2s step-start infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* 输入字段 */
.input-field {
  position: relative;
  margin-bottom: 24px;
}

.field-label {
  display: block;
  margin-bottom: 8px;
  color: #00ffff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cyber-input :deep(.el-input__wrapper) {
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow:
      0 2px 8px rgba(0, 255, 255, 0.1),
      inset 0 1px 2px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.cyber-input :deep(.el-input__wrapper:hover),
.cyber-input :deep(.el-input__wrapper.is-focus) {
  border-color: #00ffff;
  box-shadow:
      0 4px 16px rgba(0, 255, 255, 0.3),
      inset 0 1px 2px rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.cyber-icon {
  color: #00ffff;
  font-size: 16px;
}

.input-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00ffff, #ff00ff);
  transition: width 0.3s ease;
}

.cyber-input :deep(.el-input__wrapper.is-focus) ~ .input-underline {
  width: 100%;
}

/* 验证码容器 */
.verification-container {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.verification-input {
  flex: 1;
}

.proton-verification {
  position: relative;
  width: 100px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0, 255, 255, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.proton-verification:hover {
  border-color: #00ffff;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.proton-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
}

.proton-core {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #00ffff, transparent);
  border-radius: 50%;
  animation: protonSpin 3s linear infinite;
}

.proton-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 255, 255, 0.5);
  border-radius: 50%;
  animation: orbitSpin 2s linear infinite;
}

.verification-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.refresh-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #00ffff;
}

.proton-verification:hover .refresh-overlay {
  opacity: 1;
}

@keyframes protonSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes orbitSpin {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(-360deg) scale(1); }
}

/* 操作按钮 */
.access-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  justify-content: center;
}

.dimension-reset, .quantum-login {
  position: relative;
  flex: 1;
  height: 48px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  overflow: hidden;
  border: none;
  max-width: 160px;
}

.dimension-reset {
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: #00ffff;
}

.quantum-login {
  background: linear-gradient(135deg, #00ffff, #ff00ff);
  color: #000;
}

.btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.dimension-reset:hover .btn-glow,
.quantum-login:hover .btn-glow {
  left: 100%;
}

.dimension-reset:hover {
  background: rgba(0, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 255, 255, 0.3);
}

.quantum-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 255, 255, 0.4);
}

.login-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: inherit;
  animation: quantumPulse 2s ease-in-out infinite;
  opacity: 0;
}

@keyframes quantumPulse {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.1); }
}

/* 终端底部 */
.terminal-footer {
  padding: 20px 30px;
  border-top: 1px solid rgba(0, 255, 255, 0.2);
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.05), transparent);
}

.security-monitor {
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.monitor-line {
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
}

.monitor-line:last-child {
  margin-bottom: 0;
}

.monitor-tag {
  color: #00ffff;
  font-weight: bold;
}

.monitor-value {
  color: #e0e0ff;
}

/* 浮动警告 */
.floating-warnings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.warning-text {
  position: absolute;
  color: rgba(255, 0, 0, 0.3);
  font-size: 12px;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  animation: floatWarning 20s linear infinite;
}

@keyframes floatWarning {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-terminal {
    width: 90%;
    margin: 20px;
    padding: 0;
  }

  .terminal-body {
    padding: 20px;
  }

  .verification-container {
    flex-direction: column;
  }

  .proton-verification {
    width: 100%;
    height: 44px;
  }

  .access-actions {
    flex-direction: column;
  }

  .dimension-reset, .quantum-login {
    max-width: none;
  }

  .trisolaris-system {
    display: none;
  }
}
</style>